<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/login_reglogin.css"/>
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <title>登陆</title>
</head>
<body>
<div class="bg">
    <img src="/static/images/b.jpg" alt="">
</div>
<div class="main">
    <div class="header">
        <h1>Login!</h1>
    </div>
    <p></p>
    <ul class="right-form">
        <h2>Login:</h2>
        <li><input type="text" class="username" name="username" placeholder="Username" required/></li>
        <li><input type="password" class="password" name="password" placeholder="Password" required/></li>
        <input type="button" value="登录" onclick="login()">
        <div class="clear"></div>
    </ul>
    <div class="clear"></div>
</div>

<script>
    function login() {
        let username = $(".username").val();
        let password = $(".password").val();

        let post_data = {
            'username': username,
            'password': password
        };

        $.ajax({
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(post_data),
            url: 'http://127.0.0.1:8000/v1/tokens/',
            success: function (result) {
                if (result.code == 200) {
                    localStorage.setItem('dada_blog_token', result.data.token);
                    localStorage.setItem('dada_blog_username', result.data.username);
                    alert('登录成功');
                } else {
                    alert(result.msg);
                }
            }
        });
    }
</script>

</body>


</html>
